<template>
	<view>
		<!-- #ifdef H5 -->
		
		<cu-custom class="bgLiner" :isBack="true" style="position: fixed;top: 0; width: 100%;z-index: 9999;">
			<block slot="content">审核失败</block>
		</cu-custom>
		<view style="padding-top: 45px;"></view>
		<!-- #endif -->
		
		<!-- #ifdef MP-WEIXIN || APP-PLUS -->
		
		<cu-custom :bgColor="'bgLiner'"  :isBack="true">
			<block slot="content">审核失败</block>
		</cu-custom>
		
		<!-- #endif -->
		<view class="applyFor-top">
			<view class="applyFor-top-Text">
				<text>认证状态</text>
				<text class="sizieStyle">审核失败</text>
			</view>
			<view class="imgCon">
				<image class="imgStyle" :src="zmzImg" mode=""></image>
			</view>
		</view>
		
		<view class="applyFor-top-center" >
			<view class="applyFor-top-centerList">
				<view class="applyFor-top-centerli">
					<text>申请时间</text>
					<text class="applyForListStyle">{{list.createTime}}</text>
				</view>
				<view class="applyFor-top-centerli">
					<text>认证技能</text>
					<text class="applyForListStyle">{{ list.skillCategoryList.name }}</text>
				</view>
				<view class="applyFor-top-centerli">
					<text>认证资历</text>
					<text class="applyForListStyle">{{ list.qualificationsId }}</text>
				</view>
				<view class="applyFor-top-centerli">
					<text>失败原因</text>
					<text class="applyForListStyle sbyyin">{{ list.description }}</text>
				</view>
				
			</view>
		</view>
		
		<view class="recertification" @tap="recertification">
			重新认证
		</view>
		
	</view>
</template>

<script>
	import config from 'config/env'
	import { getFail } from '@/api/skill.js'
	export default {
		data() {
			return {
				list:'',
				tjImg:`${config.imgSrcL}applyForBg.png`,
				zmzImg:`${config.imgSrcL}fail.png`,
			};
		},
		onLoad(options) {
			this.getFailData(options.id)
		},
		methods:{
			async getFailData(id){
				const { data } = await getFail(id)
				this.list = data
			},
			recertification(){
				uni.navigateTo({
					url:`/subpkg/skill/applyFor/applyFor?name=${this.list.skillCategoryList.name}&id=${this.list.id}`
				})
			}
		}
	}
</script>

<style lang="scss">

.bgLiner{
	background: #fff;
	color: #000;
}
.recertification{
	width: 318rpx;
	height: 84rpx;
	background: #000000;
	box-shadow: 0rpx 12rpx 23rpx 0rpx rgba(0,0,0,0.18);
	border-radius: 42rpx;
	color: #fff;
	line-height: 84rpx;
	text-align: center;
	position: fixed;
	bottom:127.75rpx;
	left: 50%;
	transform: translateX(-50%);
}
.applyFor-top-center{
	width: 95%;
	margin: -20px auto 0;
	height: 475rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 2rpx 19rpx 0rpx rgba(0,0,0,0.05);
	border-radius: 6rpx;
	padding: 20px 28.12rpx;
	.applyFor-top-centerList{
		padding-top: 10px;
		.applyFor-top-centerli{
			font-size: 26rpx;
			color: #000;
			display: flex;
			justify-content: space-between;
			margin-bottom: 35px;
			.sbyyin{
				width: 70%;
				display: flex;
				justify-content: flex-end
			}
		}
	}
}
.applyFor-top{
	width: 100%;
	height: 273.75rpx;
	background: url('#{$global-url-prefix}bgabner.png') no-repeat;
	background-size: cover;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 50px;
	.applyFor-top-Text{
		display: flex;
		flex-direction: column;
		color: #fff;
		letter-spacing: 1rpx;
		font-size: 23rpx;
		.sizieStyle{
			font-size: 35rpx;
			margin-top: 22rpx;
		}
	}
	.applyText{
		color: #fff;
		margin-top: 26.95rpx;
		background: linear-gradient(0deg, #F2BB76 0%, #F0DBC3 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.imgCon{
		width: 112.5rpx;
		height: 112.5rpx;
		background: #FFFBF2;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		.imgStyle{
			width: 112.5rpx;
			height: 112.5rpx;
		}
	}
}
</style>
